<!-- 商户结算信息 -->
<template>
  <div>
    <a-modal :width="1200" :open="openForm" @cancel="onClose" :maskClosable="false" :destroyOnClose="true" :footer="false">
      <template #title>
        <div ref="modalTitleRef" style="width: 100%; cursor: move; display: flex; justify-content: space-between">
          <div style="font-size: 18px">查看商户信息</div>
          <div style="width: 80%; display: flex; justify-content: space-around; font-weight: 400; font-size: 14px; align-items: flex-end">
            <div style="font-weight: 400">状态：{{ selectDictLabel(ZZB_MCH_NO_STATUS, form.status) }}</div>
            <div>入网时间：{{ formatTime(form?.cTime) }}</div>
          </div>
        </div>
      </template>
      <a-descriptions style="padding: 10px 30px" :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 2 }">
        <a-descriptions-item label="登录账号">
          {{ form.no }}
        </a-descriptions-item>
        <a-descriptions-item label="商户名称">{{ form.companyName }}</a-descriptions-item>
        <!-- <a-descriptions-item label="所属代理商">{{ form.agentInfo?.companyName }}</a-descriptions-item>
      <a-descriptions-item label="代理商等级">{{ form.agentInfo?.level }}</a-descriptions-item>
      <a-descriptions-item label="代理商联系人">{{ form.agentInfo?.name }}</a-descriptions-item>
      <a-descriptions-item label="代理商联系号码">{{ form.agentInfo?.phone }}</a-descriptions-item> -->
        <a-descriptions-item label="商户联系人">{{ form.name }}</a-descriptions-item>
        <a-descriptions-item label="商户联系号码">{{ form.phone }}</a-descriptions-item>
        <!-- <a-descriptions-item :span="6" label="开户业务人员">{{ form.exhibitionName }}</a-descriptions-item> -->
        <a-descriptions-item :span="6" label="商户地址">{{ form.area }}{{ form.addr }}</a-descriptions-item>
        <!-- <a-descriptions-item style="padding-bottom: 0" :span="6" label="备注">{{ form.remark }}</a-descriptions-item> -->
      </a-descriptions>

      <div>
        <a-table :dataSource="tatleData" :columns="columns" bordered :pagination="false">
          <template #bodyCell="{ record, column }">
            <template v-if="column.dataIndex === 'action'">
              <div class="smart-table-operate">
                <a-button @click="showForm(record)" type="link">申请修改</a-button>
              </div>
            </template>
          </template>
        </a-table>
      </div>
    </a-modal>

    <a-modal :width="700" title="申请修改" :open="visibleUpdata" @cancel="onUpdataClose" :maskClosable="false" :destroyOnClose="true" :footer="false">
      <a-form ref="formRef" :model="formData" :rules="rules" layout="top">
        <a-row>
          <a-form-item label="账户类型">
            <a-select v-model:value="formData.type" style="width: 180px" allowClear :options="CHANNEL_BUSINESS_TYPE" placeholder="请选择" />
          </a-form-item>
        </a-row>
        <a-row>
          <a-form-item label="结算方式">
            <a-select
              v-model:value="formData.settleType"
              style="width: 180px"
              allowClear
              :options="CHANNEL_BUSINESS_TYPE"
              placeholder="请选择"
              @change="changeSettleType"
            />
          </a-form-item>
        </a-row>
        <a-row>
          <a-form-item label="支付宝账号">
            <a-input v-model:value="formData.companyNameLeftLike" placeholder="支付宝账号" />
          </a-form-item>
        </a-row>
        <a-row>
          <a-form-item label="开户银行">
            <a-input v-model:value="formData.companyNameLeftLike" placeholder="开户银行" />
          </a-form-item>
        </a-row>
        <a-row>
          <a-form-item label="开户行地址">
            <a-input v-model:value="formData.companyNameLeftLike" placeholder="开户行地址" />
          </a-form-item>
        </a-row>
        <a-row>
          <a-form-item label="银行账号">
            <a-input v-model:value="formData.companyNameLeftLike" placeholder="银行账号" />
          </a-form-item>
        </a-row>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="onUpdataClose">取消</a-button>
          <a-button type="primary" @click="onSubmit">保存</a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>
<script setup>
  import { nextTick, reactive, ref, computed, watch } from 'vue'
  import { SmartLoading } from '/src/components/framework/smart-loading'
  import { merchantApi } from '/@/api/business/b-operation/merchant/merchant-api'
  import dayjs from 'dayjs'
  import _ from 'lodash'
  import {
    ZZB_MCH_NO_STATUS,
    CHANNEL_BUSINESS_TYPE, // 通道业务类型
    SERVICE_TYPE, // 业务类型
    SETTLEMENT_TYPE, // 结算方式
    AUDIT_STATUS, // 审核状态
    BANK_ACCOUNT_TYPE, // 账户类型
  } from '/@/constants/dict'
  import { selectDictLabel } from '/@/utils/common'

  const props = defineProps({
    open: {
      type: Boolean,
      default: false,
    },
    rowData: {
      type: Object,
      default: () => {},
    },
  })
  // ------------------------ 事件 ------------------------

  const emit = defineEmits(['update:open', 'ok'])
  const openForm = computed({ get: () => props.open, set: (val) => emit('update:open', val) })

  // ------------------------ 显示与隐藏 ------------------------

  // 获取结算列表
  const tatleData = ref([])
  async function getSettlementList(data) {
    SmartLoading.show()
    let res = await merchantApi.settleList(data)
    if (res.code === 200) {
      formData.value = res.data
      tatleData.value = res.data
      console.log(formData.value)
    }
    SmartLoading.hide()
  }
  async function show(rowData) {
    form.value = rowData
    let params = { id: rowData.id }
    await getSettlementList(params)
    nextTick(() => {
      formRef.value?.clearValidate()
    })
  }

  function onClose() {
    Object.assign(form, formDefault)
    openForm.value = false
  }

  // ------------------------ 表单 ------------------------

  /* 列表数据 */

  const columns = ref([
    {
      title: '序号',
      dataIndex: 'index',
      width: 70,
      align: 'center',
      customRender: ({ index }) => {
        return index + 1 //(queryForm.pageNo - 1) * queryForm.pageSize + index + 1
      },
    },
    {
      title: '通道名称',
      dataIndex: 'channelName',
      ellipsis: true,
    },
    {
      title: '签约账号',
      dataIndex: 'tripleMerchantId',
      ellipsis: true,
    },
    {
      title: '业务类型',
      dataIndex: 'serviceType',
      customRender: ({ text }) => {
        return selectDictLabel(SERVICE_TYPE, text)
      },
      ellipsis: true,
    },
    {
      title: '账户类型',
      dataIndex: 'bankAccountType',
      customRender: ({ text }) => {
        return selectDictLabel(BANK_ACCOUNT_TYPE, text)
      },
      ellipsis: true,
    },
    {
      title: '结算方式',
      dataIndex: 'settlementType',
      customRender: ({ text }) => {
        return selectDictLabel(SETTLEMENT_TYPE, text)
      },
      ellipsis: true,
    },
    // {
    //   title: '支付宝账号',
    //   dataIndex: 'phone',
    //   ellipsis: true,
    // },
    {
      title: '开户银行',
      dataIndex: 'accountBank',
      ellipsis: true,
    },
    {
      title: '银行账号',
      dataIndex: 'accountNumber',
      ellipsis: false,
    },
    {
      title: '状态',
      dataIndex: 'auditStatus',
      customRender: ({ text }) => {
        return selectDictLabel(AUDIT_STATUS, text)
      },
      ellipsis: true,
    },
    {
      title: '更新时间',
      dataIndex: 'uTime',
      customRender: (column) => dayjs(column.text).format('YYYY-MM-DD HH:mm:ss'),
      ellipsis: true,
    },
    // {
    //   title: '操作',
    //   dataIndex: 'action',
    //   fixed: 'right',
    //   width: 180,
    // },
  ])

  /* 列表数据 */
  // 组件ref
  const formRef = ref()

  const formDefault = {
    no: undefined, // 商户
    cTime: undefined, // 商户
    status: undefined, // 商户
    companyName: undefined, // 商户
    name: undefined, // 商户
    phone: undefined, // 商户
    exhibitionId: undefined, // 商户
    areaCode: undefined, // 商户
    addr: undefined, // 商户
    remark: undefined, // 商户
    agentInfo: undefined, // 代理商
    exhibitionName: undefined,
  }

  // 格式化函数（组合式API）
  const formatTime = (timestamp) => {
    return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
  }

  let form = ref({ ...formDefault })

  /* 修改弹窗 */
  const initForm = {
    no: undefined,
    cTime: undefined,
    status: undefined,
    companyName: undefined,
    name: undefined,
    phone: undefined,
    exhibitionId: undefined,
    areaCode: undefined,
    addr: undefined,
    remark: undefined,
    agentInfo: undefined,
    exhibitionName: undefined,
  }
  const formData = ref({ ...initForm })
  const rules = {
    no: [{ required: true, message: '登录账号 必填' }],
  }
  const visibleUpdata = ref(false)
  function onUpdataClose() {
    visibleUpdata.value = false
  }

  // 结算方式切换时
  const changeSettleType = (e) => {
    console.log(e)
  }

  // 表单校验
  const validateForm = async () => {
    let isValid = false
    try {
      await formRef.value.validate()
      isValid = true
    } catch (error) {
      message.warning(error.errorFields[0].errors)
      isValid = false
    }
    return isValid
  }
  // 点击确定，验证表单
  async function onSubmit() {
    validateForm.then((isValid) => {
      if (isValid) {
        console.log('')
      }
    })
  }

  /* 修改弹窗 */

  defineExpose({
    show,
  })
  watch(
    [() => props.rowData, () => props.open],
    (val) => {
      if (props.open && props.rowData) {
        show(val[0])
      }
    },
    { immediate: true },
  )
</script>
